import { Form, FormInstance, message, Modal, Typography, Upload } from 'antd'
import './index.less'
import UploadFileByHand from '../UploadFileByHand'
import { useEffect, useState } from 'react'
import { getFileTempById } from '@/api/system'
interface IProps {
  title?: string
  open: boolean
  onCancel: () => void
  onOk: () => void
  form: FormInstance
  tempCode?: string
  loading: boolean
}
const ImportFileModal = (props: IProps) => {
  const [info, setInfo] = useState<{ excelTemplateName: string; fileUrl: string }>()
  useEffect(() => {
    if (props.open && props.tempCode) {
      getTempByTempCode()
    }
  }, [props.open])
  const getTempByTempCode = async () => {
    const res = await getFileTempById<{ excelTemplateName: string; fileUrl: string }>(props.tempCode)
    if (res.code === 200) {
      if (res.data) {
        setInfo(res.data)
      } else {
        setInfo({ excelTemplateName: '', fileUrl: '' })
        message.warning('请联系管理员配置导入模板！')
      }
    }
  }
  return (
    <Modal
      title={props.title ? props.title : '导入文件'}
      open={props.open}
      onCancel={props.onCancel}
      onOk={props.onOk}
      okText="上传"
      confirmLoading={props?.loading}
    >
      <Form form={props.form} layout="vertical">
        <Form.Item
          label="附件上传"
          name="file"
          style={{ marginBottom: 0 }}
          rules={[{ required: true, message: '请上传附件' }]}
        >
          <UploadFileByHand
            templateText={info?.excelTemplateName}
            templateUrl={info?.fileUrl}
            loading={props?.loading}
          ></UploadFileByHand>
        </Form.Item>
      </Form>
    </Modal>
  )
}
export default ImportFileModal
